// // 1.1 获取裁剪区域的 DOM 元素
// var $image = $("#image")
// // 1.2 配置选项
// const options = {
//   // 纵横比
//   aspectRatio: 1,
//   // 指定预览区域
//   preview: ".img-preview",
// }

// // 1.3 创建裁剪区域
// $image.cropper(options)

$("#image").cropper({
  aspectRatio: 1, // 纵横比
  preview: ".img-preview", // 表示要渲染的区域
})

function registerEvent() {
  $("#btnUpload").click(function () {
    // 获取dom对象
    // $("#imageInput")[0].click()
    $("#imageInput").trigger("click")
  })

  $("#imageInput").change(function (event) {
    // 当选择的图片发生变化时，就会触发该事件
    const fileList = event.target.files // 获取选择的文件列表
    if (fileList.length) {
      const [file] = fileList // 取第0个
      // 替换裁剪区域的图片
      const newImgUrl = URL.createObjectURL(file) // 会将文件对象转化成一个本地图片地址
      // 赋值给裁剪区域的图片内容
      // 先销毁原来的裁剪区 => 重新赋值src地址 => 再次重新初始化
      $("#image").cropper("destroy").attr("src", newImgUrl).cropper({
        aspectRatio: 1, // 纵横比
        preview: ".img-preview", // 表示要渲染的区域
      })
    } else {
      layui.layer.msg("请选择图片")
    }
  })
  $("#btnOK").click(function () {
    // 获取裁切过后的图片 base64
    // canvas- 画布-h5
    // 要将裁切的对象 => canvas画布
    const avatar = $("#image")
      .cropper("getCroppedCanvas", {
        width: 200,
        height: 200,
      })
      .toDataURL("image/jpeg")
    // 上传图片
    $.ajax({
      method: "post",
      url: "/my/update/avatar",
      data: {
        avatar,
      },
      success({ status, message }) {
        if (status === 0) {
          layui.layer.msg("头像上传成功")
          // window  当前页面
          // window.parent
          // window.top
          window.top.getUserInfo()
        } else {
          layui.layer.msg(message)
        }
      },
    })
  })
}
registerEvent()
